<!doctype html>
<html lang="en" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Login | Klorofil - Free Bootstrap Dashboard Template</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <!-- VENDOR CSS -->
    <link rel="stylesheet" th:href="@{/backstage/assets/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/backstage/assets/vendor/font-awesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/backstage/assets/vendor/linearicons/style.css}"/>
    <!-- MAIN CSS -->
    <link rel="stylesheet" th:href="@{/backstage/assets/css/main.css}"/>
    <!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
    <link rel="stylesheet" th:href="@{/backstage/assets/css/demo.css}"/>
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet"/>
    <!-- ICONS -->
    <link rel="apple-touch-icon" sizes="76x76" th:href="@{/backstage/assets/img/apple-icon.png}"/>
    <link rel="icon" type="image/png" sizes="96x96" th:href="@{/backstage/assets/img/favicon.png}"/>

    <!--<link rel="stylesheet" th:href="@{/matrix/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/matrix/css/bootstrap-responsive.min.css}"/>
    <link rel="stylesheet" th:href="@{/matrix/css/jquery.gritter.css}"/>
    <link rel="stylesheet" th:href="@{/matrix/css/matrix-style.css}"/>
    <link rel="stylesheet" th:href="@{/matrix/css/matrix-media.css}"/>
    <link th:href="@{/matrix/font-awesome/css/font-awesome.css}" rel="stylesheet"/>-->

    <link rel="stylesheet" th:href="@{/common/jquery-confirm/css/jquery-confirm.css}"/>
    <!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'/>-->
</head>

<body>
<!--<div id="tips" class="alert alert-error alert-block" style="visibility: hidden;"><a class="close" data-dismiss="alert" href="javascript:closetips()">×</a>
    <h4 class="alert-heading">Error!</h4>
    You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</div>-->
<!-- WRAPPER -->
<div id="wrapper">
    <div class="vertical-align-wrap">
        <div class="vertical-align-middle">
            <div class="auth-box ">
                <div class="left">
                    <div class="content">
                        <div class="header">
                            <div class="logo text-center"><img th:src="@{/backstage/assets/img/logo-dark.png}" alt="Klorofil Logo"/></div>
                            <p class="lead">Login to your account</p>
                        </div>
                        <form class="form-auth-small" action="/loginUser" method="post">
                            <div class="form-group">
                                <label for="signin-email" class="control-label sr-only">Email</label>
                                <input type="email" th:id="username" th:name="username" class="form-control" id="signin-email" th:value="${user == null ? '' : user.userName }" placeholder="Email" required="required"/>
                            </div>
                            <div class="form-group">
                                <label for="signin-password" class="control-label sr-only">Password</label>
                                <input type="password" th:id="password" th:name="password" class="form-control" id="signin-password" th:value="${user == null ? '' : user.password }" placeholder="Password" required="required"/>
                            </div>
                            <div class="form-group clearfix">
                                <label class="fancy-checkbox element-left">
                                    <input type="checkbox"/>
                                    <span>Remember me</span>
                                </label>
                            </div>
                            <div class="form-group" style="visibility: hidden">
                                <label for="signinstat" class="control-label sr-only">signin-stat</label>
                                <input type="text" id="signinstat" th:name="signinstat" class="form-control" th:value="${loginstatus == null ? '' : loginstatus }" />
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg btn-block">LOGIN</button>
                            <div class="bottom">
                                <span class="helper-text"><i class="fa fa-lock"></i> <a href="#">Forgot password?</a></span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="right">
                    <div class="overlay"></div>
                    <div class="content text">
                        <h1 class="heading">Free Bootstrap dashboard template</h1>
                        <p>by The Develovers</p>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<!-- END WRAPPER -->

<script th:src="@{/common/jquery-3.1.1.js}"/>
<script th:src="@{/matrix/js/jquery.ui.custom.js}"></script>
<script th:src="@{/matrix/js/bootstrap.min.js}"></script>
<script th:src="@{/matrix/js/jquery.gritter.min.js}"></script>
<script th:src="@{/matrix/js/jquery.peity.min.js}"></script>
<!--<script th:src="@{/matrix/js/matrix.js}"></script>
<script th:src="@{/matrix/js/matrix.interface.js}"></script>
<script th:src="@{/matrix/js/matrix.popover.js}"></script>-->
<script th:src="@{/common/jquery-confirm/js/jquery-confirm.js}"></script>
<script type="text/javascript">
    $(function () {
        var logstat = $('#signinstat').val();
        if (null != logstat) {
            if (logstat == 'fail'){
                //$('#tips').removeAttr('style')
                //$('#tips').show();
//                $.alert({
//                    theme: 'bootstrap',
//                    title: '登陆失败',
//                    icon: 'fa fa-info-circle',//fa-info-circle，fa-bug，fa fa-waring,fa fa-times-circle
//                    type: 'red',//red, green, orange, blue, purple, dark
//                    content: '登陆失败, 请检查用户名密码稍后再试.'
//                });

                // auto close
                $.confirm({
                    theme: 'bootstrap',
                    type: 'red',
                    title: '登陆失败',
                    content: '登陆失败, 请检查用户名密码稍后再试.',
                    autoClose: 'cancelAction|5000',
                    escapeKey: 'cancelAction',
                    buttons: {
//                        confirm: {
//                            btnClass: 'btn-red',
//                            text: 'Delete ben\'s account',
//                            action: function () {
//                                $.alert('You deleted Ben\'s account!');
//                            }
//                        },
                        cancelAction: {
                            text: 'Cancel',
                            action: function () {
                                //$.alert('Ben just got saved!');
                            }
                        }
                    }
                });
            }
        }
    })

    function closetips() {
        //$('#tips').attr('style','visibility: hidden');
        //$('#tips').hide();
    }
</script>

</body>

</html>
